<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘性定位</title>
    <style>
        /* 4. 粘性定位 sticky */
        body{
            height: 10000px;
            background: yellow;
        }
        .toubu{
            width: 100%;height: 350px;background: #f5f5f5;
        }
        .logo{
            width: 100%;height: 100px;background: #ccc;
            line-height: 100px;color: red; font-size: 40px;
            /* logo区域的顶部，到“有滚动条的区域”的顶部，距离为0时，就开始固定在“该滚动区域”的顶部 */
            position: sticky;top: 0;
        }
    </style>
</head>
<body>
    <div class="toubu">中国大陆</div>
    <div class="logo">
        淘宝
    </div>
</body>
</html>